<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
test(() => assert_selection(
    [
        '<div contenteditable>',
            '<div>^foo</div>',
            '<table contenteditable="false">',
                '<tr>',
                    '<td>non-editable</td>',
                    '<td contenteditable="plaintext-only">plaintext-only</td>',
                '</tr>',
            '</table>|',
        '</div>'
    ].join(''),
    'bold',
    [
        '<div contenteditable>',
            '<div><b>^foo</b></div>',
            '<table contenteditable="false">',
                '<tbody><tr>',
                    '<td>non-editable</td>',
                    '<td contenteditable="plaintext-only" style="font-weight: bold;">plaintext-only</td>',
                '</tr></tbody>',
            '</table>|',
        '</div>'
    ].join('')),
    'Plaintext-only regions can be styled as long as they are fully selected.');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '<div>^foo</div>',
            '<table contenteditable="false">',
                '<tr>',
                    '<td>non-editable</td>',
                    '<td contenteditable="plaintext-only">',
                        '<span>plaintext|</span>-only',
                    '</td>',
                '</tr>',
            '</table>',
        '</div>'
    ].join(''),
    'bold',
    [
        '<div contenteditable>',
            '<div><b>^foo</b></div>|',
            '<table contenteditable="false">',
                '<tbody><tr>',
                    '<td>non-editable</td>',
                    '<td contenteditable="plaintext-only">',
                        '<span>plaintext</span>-only',
                    '</td>',
                '</tr></tbody>',
            '</table>',
        '</div>'
    ].join('')),
    'Plaintext-only regions are not styled if they are not fully selected.');
</script>
